{template 'header'}
<link rel="stylesheet" href="{MODULE_URL}assets/css/pic_look.css">
<style>
    .up_loader_text {
        background: #fff;
        margin-top: -10px;
        padding-top: 10px;
        padding-bottom: 5%;
    }

    .text_red {
        color: #dd524d;
        margin: 10px;
    }

    .case img {
        width: 100%;
    }

    .case div {
        padding: 10px;
    }
    .case img{
        height: 16rem;
    }

    #uploadForm {
        text-align: center
    }
    #uploadForm img {
        border: dashed 2px #d7d7d7;
    }
    #uploadForm .hied_input {
        display: none;
        position: fixed;
        top: -99999999999px;
    }
    #uploadForm div {
        padding: 10px;
    }
    /*.mui-btn {*/
    /*    margin-bottom: 20px !important;*/
    /*}*/
    .mui-btn-block{
        font-size: 16px;
        margin: 10px auto;
        width: 96%;
        padding: 8px 0;
    }

</style>
</head>
<body>
<div class="mui-content">
    <!-- 要求文本开始 -->
    <div class="up_loader_text">
        <div class="mui-content-padded">
            <p>要求:</p>
            {loop $setting['detail'] $item}
            <p>{$item}</p>
            {/loop}
        </div>
    </div>
    <!-- 要求文本结束 -->
    <!-- 样例开始 -->
    <div class="mui-row case">
        <p class="text_red">样例：</p>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <img src="{$setting['thumb1']}" class="mui-media-object">
        </div>
        <div class="mui-col-sm-6 mui-col-xs-6">
            <img src="{$setting['thumb2']}" class="mui-media-object">
        </div>
    </div>
    <!-- 样例结束 -->
    <!-- 上传模块开始 -->
    <div>
        <p>上传凭证：</p>
        <form id='uploadForm' enctype="multipart/form-data" class="mui-row" onsubmit="return false">
            <div class="mui-col-sm-6 mui-col-xs-6">
                <img src="{MODULE_URL}assets/img/pic_img.png" class="mui-media-object" id="pic1">
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6">
                <img src="{MODULE_URL}assets/img/pic_img.png" class="mui-media-object" id="pic2">
            </div>
            <input type="file" name="uploader_pic1" class="hied_input" accept="image/*" id="uploader_pic1">
            <input type="file" name="uploader_pic2" class="hied_input" accept="image/*" id="uploader_pic2">
            <button type="button" value="上传图片" class="mui-btn mui-btn-primary mui-btn-block" id="uploader_btn">上传图片</button>
        </form>
    </div>
    <!-- 上传模块结束 -->
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script type="text/javascript">
    //上传图片的
    $('#pic1').click(function (e) {
        $('#uploader_pic1').click();
        $('#uploader_pic1').on('change',function () {
            $('#pic1').attr("style", "width:100%;height:18rem;border:none;");
            $('#pic1').attr("src", URL.createObjectURL(event.target.files[0]));
        })
    });
    $('#pic2').click(function (e) {
        $('#uploader_pic2').click();
        $('#uploader_pic2').on('change',function () {
            $('#pic2').attr("style", "width:100%;height:18rem;border:none;");
            $('#pic2').attr("src", URL.createObjectURL(event.target.files[0]));
        })
    });

    $('#uploader_btn').click(function () {
        if($('#uploader_pic1').val() != '' && $('#uploader_pic2').val() != ''){
            var formData = new FormData($('#uploadForm')[0]); //处理为fromData
            $.ajax({
                url: '{php echo $this->createMobileUrl("core",array("op"=>"faquan_submit","extra"=>"upload"))}',
                type: 'POST',
                data: formData,
                dataType:"json",
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                // 成功
                success: function(data) {
                    if(data.code == 1){
                        submitTask(data.data)
                    }else{
                        mui.toast(data.msg)
                    }
                }
            })
        }else {
            mui.alert('必须上传两张图片')
        }
    });
    function submitTask(picarr) {
        picarr = picarr.join(';');
        var list_url = '{php echo $this->createMobileUrl("core",array("op"=>"faquan_submit"))}';
        mui.ajax(list_url,{
            data:{picarr},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                if(ret.code){
                    mui.alert(ret.msg,'',function () {
                        location.href = '{php echo $this->createMobileUrl("member",array("op"=>"index"))}'
                    })
                }else{
                    mui.toast(ret.msg)
                }
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.toast("服务器出现异常，请稍后重试");
            }
        });
    }
</script>